<template>
  <div class="nav-container" :class="{'is-mobile': isMobile}">
    <div class="nav-brand" @click="$router.push('/')">
      <i class="el-icon-data-analysis"></i>
      <span class="brand-text">铝价数据系统</span>
    </div>
    <div class="nav-menu" v-if="!isMobile"></div>
    <div class="nav-toggle" v-else @click="toggleSidebar">
      <i class="el-icon-menu"></i>
    </div>
    
    <!-- 移动端侧边栏 -->
    <div class="sidebar-overlay" v-if="sidebarVisible" @click="sidebarVisible = false"></div>
    <div class="sidebar" :class="{'active': sidebarVisible}">
      <div class="sidebar-header">
        <span>铝价数据系统</span>
        <i class="el-icon-close" @click="sidebarVisible = false"></i>
      </div>
      <div class="sidebar-content">
        <div class="sidebar-item" @click="sidebarVisible = false">
          <i class="el-icon-s-home"></i>
          <span>铝价数据列表</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      sidebarVisible: false
    }
  },
  methods: {
    toggleSidebar() {
      this.sidebarVisible = !this.sidebarVisible
    }
  }
}
</script>